웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제목이 무엇을 의미하는지 헤깔릴 여지가 있습니다. 아래의 내용은 순수 자바스크립트 또는 제이쿼리를 사용하여 스크립트 코드를 작성할때 그 코드가 DOM요소를 모두 불러온 뒤 실행될 수 있도록 미리 선언하는 코드입니다.
! 만약 DOM 요소(태그들...)가 먼저 로딩되지 않을때 스크립트를 실행한다면? 위와 같이 DOM요소들이 아직 로딩되기 이전에 스크립트코드가 실행이 되는 경우 실행시 선택한 요소객체가 있는 경우 정상적으로 불러오지 않은 상태이기 때문에 에러를 발생합니다.
예를 들면... 손에 깃발이 없는 상태에서 깃발을 들어!!! 라고 명령하는 것과 같습니다.
# 자바스크립트 및 제이쿼리 페이지가 로딩 후 코드 실행
이처럼 페이지가 모두 열린 뒤 실행하면 문제가 없을 것입니다. 브라우저가 페이지를 서버에서 읽어올때 인터넷 속도 및 환경에 따라 페이지 로딩이 늦어지고 빨라질 수 있기 때문에 이런 에러가 나타나기도 안나타날수도 있으므로 반드시 아래처럼 선언해야 할 것입니다.
제이쿼리의 경우 위 방법과 동일하나 축약하여 사용할 수 있는 방법이 존재합니다. 아래 방법이 더욱 간단합니다. 다음 코드를 봐주세요.
# 스크립트를 body 태그 뒤에 위치시키는 방법! 스크립트를 head 태그가 아닌 맨 뒤... 그러니까 모든 태그가 브라우저에 읽혀진 뒤 스크립트를 위치하는 경우를 생각할 수 있습니다. 그런 경우라면 위와 같은 선언은 하지 않아도 됩니다. 하지만 일반적으로 스크립트는 <head> 태그 안에 위치합니다.
! 만약 DOM 요소(태그들...)가 먼저 로딩되지 않을때 스크립트를 실행한다면? 위와 같이 DOM요소들이 아직 로딩되기 이전에 스크립트코드가 실행이 되는 경우 실행시 선택한 요소객체가 있는 경우 정상적으로 불러오지 않은 상태이기 때문에 에러를 발생합니다.
예를 들면... 손에 깃발이 없는 상태에서 깃발을 들어!!! 라고 명령하는 것과 같습니다.
# 자바스크립트 및 제이쿼리 페이지가 로딩 후 코드 실행
이처럼 페이지가 모두 열린 뒤 실행하면 문제가 없을 것입니다. 브라우저가 페이지를 서버에서 읽어올때 인터넷 속도 및 환경에 따라 페이지 로딩이 늦어지고 빨라질 수 있기 때문에 이런 에러가 나타나기도 안나타날수도 있으므로 반드시 아래처럼 선언해야 할 것입니다.! 순수 자바스크립트를 사용한 방법
순수 자바스크립트 코드만을 사용하는 경우입니다.window.onload = function() {
코드내용 ...
};
코드내용 ...
};
! 제이쿼리로 작성한 코드 실행시
제이쿼리를 사용한 방법입니다.$(document).ready(function() {
코드내용 ...
});
코드내용 ...
});
제이쿼리의 경우 위 방법과 동일하나 축약하여 사용할 수 있는 방법이 존재합니다. 아래 방법이 더욱 간단합니다. 다음 코드를 봐주세요.
$(function() {
코드내용...
});
매우 쉽죠? 다시 말씀드리면 DOM요소의 로딩이 수반되어야 함수가 정상적으로 실행됩니다.코드내용...
});
# 스크립트를 body 태그 뒤에 위치시키는 방법! 스크립트를 head 태그가 아닌 맨 뒤... 그러니까 모든 태그가 브라우저에 읽혀진 뒤 스크립트를 위치하는 경우를 생각할 수 있습니다. 그런 경우라면 위와 같은 선언은 하지 않아도 됩니다. 하지만 일반적으로 스크립트는 <head> 태그 안에 위치합니다.
아래의 글도 찾고 계시지 않나요?